<template>
  <!-- 骨架屏 -->
  <!-- 
    <XtxSkeleton
    :width="200"
    :height="200"
    bg="skyblue"
    animated
    fade
  ></XtxSkeleton> 
  -->

  <!-- 轮播图 -->
  <!-- 
    <div style="height: 600px">
      <XtxCarousel></XtxCarousel>
    </div>
 -->

  <!-- 查看更多 -->
  <!-- 
    <XtxMore></XtxMore>
    <XtxMore path="/abc">查看所有</XtxMore>
  -->

  <!-- 懒加载 -->
  <div class="box"></div>
  <img src="" alt="" ref="target" />
</template>

<script setup lang="ts">
// import XtxSkeleton from '@/components/skeleton/index.vue'

// 懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref<HTMLImageElement | null>(null)

// useIntersectionObserver(dom元素, ([{isIntersecting}], observerElement) => { 进入/离开可视区需要执行的逻辑 })
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // isIntersecting => 布尔值 表示是否在可视区
  console.log(isIntersecting)
  if (isIntersecting) {
    target.value!.src =
      'https://img0.baidu.com/it/u=1480764528,847729279&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661533200&t=cb621349753099164e99efdbc88fe721'
    stop() // 表示一旦进入到可视区就不再监听了
  }
})
</script>

<style scoped>
.box {
  height: 2000px;
  background: #999;
}
</style>
